<template>
  <div>
<!--    <el-button type="primary">客单管理</el-button>-->
    <div>
      <span>请选择入住时间</span>
      <el-date-picker
        v-model="time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleChange">
      </el-date-picker>
        <el-input placeholder="姓名/房间号/手机号/身份证号/卡号" v-model="dataForm.key" class="input-with-select" style="width: 330px">
          <el-button slot="append" icon="el-icon-search" @click="getDataList"></el-button>
        </el-input>
      </div>
    <div style="margin-top: 12px">
      <el-button-group>
        <el-button @click="allList()">全部</el-button>
        <el-button @click="state(1)">在住</el-button>
        <el-button @click="state(0)">已结</el-button>
        <el-button @click="state(2)">先走未结</el-button>
        <el-button @click="state(3)">联房退房</el-button>
      </el-button-group>
      <el-checkbox v-model="isDebtOrder" style="margin-left: 15px" @change="isDebt">仅显示欠款订单</el-checkbox>
    </div>
    <div style="float: right">
      <el-button type="text" circle>
        <svg t="1721144465122" style="width: 15px;height: 15px" class="icon" viewBox="0 0 1105 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4243" width="200" height="200"><path d="M354.461538 945.230769h-157.538461A118.153846 118.153846 0 0 1 78.769231 827.076923v-630.153846A118.153846 118.153846 0 0 1 196.923077 78.769231h157.538461a39.384615 39.384615 0 0 0 0-78.769231h-157.538461A196.923077 196.923077 0 0 0 0 196.923077v630.153846A196.923077 196.923077 0 0 0 196.923077 1024h157.538461a39.384615 39.384615 0 0 0 0-78.769231z" fill="#231815" p-id="4244"></path><path d="M1102.769231 526.966154a39.384615 39.384615 0 0 0-8.664616-43.323077l-393.846153-393.846154a39.542154 39.542154 0 0 0-55.926154 55.926154L968.073846 472.615385H275.692308a39.384615 39.384615 0 0 0 0 78.76923h692.381538l-326.104615 326.892308a39.542154 39.542154 0 1 0 55.926154 55.926154l393.846153-393.846154a39.384615 39.384615 0 0 0 11.027693-13.390769z" fill="#231815" p-id="4245"></path></svg>
      </el-button>
      <el-button type="text" circle  @click="print('guestList')">
        <svg t="1721144955592" style="width: 19px;height: 19px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5273" width="200" height="200"><path d="M341.333333 640v170.666667h384v-170.666667H341.333333z m-42.666666 42.666667H170.666667V341.333333h128V170.666667h469.333333v170.666666h128v341.333334h-128v170.666666H298.666667v-170.666666z m42.666666-298.666667H213.333333v256h42.666667v-42.666667h554.666667v42.666667h42.666666V384H341.333333z m0-42.666667h384V213.333333H341.333333v128z m-85.333333 85.333334h128v42.666666H256v-42.666666z" fill="#444444" p-id="5274"></path></svg>
      </el-button>
      <el-button class="el-icon-s-grid" style="margin-top: -5px" @click="showColumnOption"  circle></el-button>
    </div>
    <div class="print-only">
      <el-table border v-loading="guestListLoading" element-loading-text="拼命加载中" style="width: 100%" row-key="id" ref="unitedHouseList"
                :default-sort="{prop: 'date', order: 'descending'}" default-expand-all :data="unitedHouseList" tooltip-effect="dark"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="sysNo" label="单号" align="center">
        </el-table-column>
        <el-table-column prop="roomSignNum" label="房号" align="center" v-if="showColumn.roomSignNum">

          <template slot-scope="scope">

            <template v-if="dataForm.lx == '7' || dataForm.lx == '8'  || dataForm.lx == '9'  || dataForm.lx == '10' ">
              <template v-if="scope.row.paifang == 1 && dataForm.lx != '10'">
                <el-button @click="manualRoomBtn(scope.row)" type="text">排房</el-button>
              </template>
              <template v-else>
                <el-popover placement="right" trigger="hover">
                  <!-- 新版-->
                  <div>
                    <el-table ref="table" :data="scope.row.singleReserves" style="width: 100%">
                      <el-table-column align="left" label="房型" width="150" prop="roomName"></el-table-column>
                      <el-table-column align="left" label="房号" width="150" prop="roomSignNum"></el-table-column>
                    </el-table>
                  </div>
                  <span slot="reference">
                  <template v-for="(item,index) in scope.row.singleReserves">
                    <div v-if="index < 2" :key="index">
                      {{item.roomSignNum}}<span style="margin-left: 3px;"></span>
                    </div>
                  </template>
                </span>
                </el-popover>

              </template>
            </template>

            <template v-else>
              <span v-if="scope.row.roomSignNum">{{ scope.row.roomSignNum }}</span>
              <span v-else> -- </span>
            </template>

          </template>

        </el-table-column>
        <el-table-column prop="roomName" label="房型" align="center" v-if="showColumn.roomName">

          <template slot-scope="scope">
            <template v-if="dataForm.lx == '7' || dataForm.lx == '8'  || dataForm.lx == '9' || dataForm.lx == '10' ">
              <template v-for="(item,index) in scope.row.singleGroupReserves">
                <div :key="index">{{item.roomName}} {{item.roomNumber}}间</div>
              </template>
            </template>
            <template v-else>
              <span v-if="scope.row.hotelFloorRoomEntity && scope.row.hotelFloorRoomEntity.roomName">{{ scope.row.hotelFloorRoomEntity.roomName }}</span>
              <span v-else> -- </span>
            </template>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="客人/联系方式" align="center" v-if="showColumn.name">
          <template slot-scope="scope" v-if="scope.row.loadMore != 'LoadMore'">
            <div>{{scope.row.name ? scope.row.name : '--'}}</div>
            <div>{{scope.row.tel ? (scope.row.tel=='null'?'--':scope.row.tel) : '--'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center" v-if="showColumn.state">
          <template slot-scope="scope">
            <!-- {{scope.row.singleEntity.type}} -->
            <span v-if="scope.row.stype == 1">
            <span v-if="scope.row.state == 0">已结退房</span>
            <span v-if="scope.row.state == 1">正常入住</span>
            <span v-if="scope.row.state == 2">未结退房</span>
            <span v-if="scope.row.state == 3">联房退房</span>
          </span>
            <span v-if="scope.row.stype == 2">
            <span v-if="scope.row.sreserveState == 1">预定中</span>
            <span v-if="scope.row.sreserveState == 2">已入住</span>
            <span v-if="scope.row.sreserveState == 3">部分入住</span>
            <span v-if="scope.row.sreserveState == 4">取消预定</span>
            <span v-if="scope.row.sreserveState == 5">超时预定</span>
          </span>
          </template>
        </el-table-column>


        <el-table-column prop="sourceType" label="客人类型" sortable align="center" v-if="showColumn.sourceType">
          <template slot-scope="scope">
            <span v-if="scope.row.sourceType == 0">散客</span>
            <span v-if="scope.row.sourceType == 1">会员</span>
            <span v-if="scope.row.sourceType == 2">协议单位</span>
            <span v-if="scope.row.sourceType == 3">中介</span>
          </template>
        </el-table-column >

        <el-table-column label="来源" align="center" v-if="showColumn.sourceAgreenid">
          <template slot-scope="scope">
            {{scope.row.sourceAgreenid}}
          </template>
        </el-table-column>
        <el-table-column prop="checkinType" label="入住类型" sortable align="center" v-if="showColumn.checkinType">
          <template slot-scope="scope">
            <span v-if="scope.row.checkinType == 0">全天房</span>
            <span v-if="scope.row.checkinType == 1">钟点房</span>
            <span v-if="scope.row.checkinType == 2">自用房</span>
            <span v-if="scope.row.checkinType == 3">免费房</span>
          </template>
        </el-table-column>

        <el-table-column label="已住天数" align="center" v-if="showColumn.days">
          <template slot-scope="scope">
            {{scope.row.singleEntity.days}}
          </template>
        </el-table-column>

        <el-table-column label="入住时间" prop="arrivalsTime" align="center" v-if="showColumn.arrivalsTime">
          <template slot-scope="scope">
            {{ scope.row.arrivalsTime }}
          </template>
        </el-table-column >

        <el-table-column label="离店时间" prop="predissociationTime" align="center" v-if="showColumn.predissociationTime">
          <template slot-scope="scope">
            {{ scope.row.predissociationTime }}
          </template>
        </el-table-column>
        <el-table-column prop="roomPrice" label="房价(元/天)" align="center" v-if="showColumn.roomPrice">
          <template slot-scope="scope">
            {{ scope.row.roomPrice }}
          </template>
        </el-table-column>
        <el-table-column label="收款合计" align="center" v-if="showColumn.collectPrice">
          <template slot-scope="scope">
            {{ scope.row.singleEntity.collectPrice }}
          </template>
        </el-table-column>
        <el-table-column label="余额" align="center" v-if="showColumn.payPrice">
          <template slot-scope="scope">
            <template v-if="scope.row.state == 3">
              {{scope.row.singleId}}
            </template>
            <template v-else>
              {{(scope.row.payment + scope.row.deposit - scope.row.consumption).toFixed(2)}}
            </template>

          </template>
        </el-table-column>

        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.state == 1">
              <el-button type="text" size="small" @click="checkout(scope.row)">结账</el-button>
            </div>
            <div v-else>
              <el-button  disabled>结账</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!-- 配置列面板 -->
      <transition name="fade">
        <el-card class="columnOption" v-show="isShowColumn" style="background-color: transparent;width: 600px">
          <div>
            <el-checkbox v-model="checkList.name">联系方式</el-checkbox>
            <el-checkbox v-model="checkList.state">状态</el-checkbox>
            <el-checkbox v-model="checkList.sourceType">客人类型</el-checkbox>
            <el-checkbox v-model="checkList.sourceAgreenid">来源</el-checkbox>
            <el-checkbox v-model="checkList.checkinType">入住类型</el-checkbox>
            <el-checkbox v-model="checkList.days">已住天数</el-checkbox>
            <el-checkbox v-model="checkList.arrivalsTime">入住时间</el-checkbox>
            <el-checkbox v-model="checkList.predissociationTime">离店时间</el-checkbox>
            <el-checkbox v-model="checkList.roomPrice">房价(元/天)</el-checkbox>
            <el-checkbox v-model="checkList.collectPrice">收款合计</el-checkbox>
            <el-checkbox v-model="checkList.payPrice">余额</el-checkbox>
          </div>
          <div >
            <el-button type="text" style="float: right;margin-top: 5px" @click="isCertain()">确定</el-button>
          </div>
        </el-card>
      </transition>
    <el-pagination style="margin-top: 15px;text-align: right;" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
      :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <changeRoom v-if="changeRoomVisible" ref="changeRoom" @refreClosing="getDataList"></changeRoom>
    <joinRoom v-if="joinRoomVisible" ref="joinRoom" @refreClosing="getDataList"></joinRoom>
    <xuzhuTiqian v-if="xuzhuTiqianVisible" ref="xuzhuTiqian" @refreClosing="getDataList" @refreshDataList="getDataList()"></xuzhuTiqian>
    <closingRoom v-if="closingRoomVisible" ref="closingRoom" @refreClosing="getDataList" @refreshDataList="getDataList()"></closingRoom>
    <ruzhang v-if="ruzhangVisible" ref="ruzhang" @refreshDataList="getDataList()"></ruzhang>
    <addPeople v-if="addPeopleVisible" ref="addPeople" @refreClosing="getDataList" @refreshDataList="getDataList()"></addPeople>
    <reservePaiFangList v-if="reservePaiFangListVisible" ref="reservePaiFangList" @refreClosing="getDataList"></reservePaiFangList>
    <guestlistLoad v-if="guestlistLoadVisible" ref="guestlistLoad"></guestlistLoad>
    <cancelReserve v-if="cancelReserveVisible" ref="cancelReserve" @refreClosing="getDataList" @refreshDataList="getDataList()"></cancelReserve>
  </div>
</template>

<script>
  import guestlistLoad from './guestlist-load';
  import reservePaiFangList from './reserve/list';
  import changeRoom from '../floorRoomSign/changeRoom';
  import cancelReserve from '../floorRoomSign/reserve/cancel-reserve';
  import joinRoom from '../floorRoomSign/joinRoom';
  import closingRoom from '../floorRoomSign/closingRoom';
  import xuzhuTiqian from '../floorRoomSign/xuzhuTiqian';
  import ruzhang from '../floorRoomSign/ruzhang';
  import addPeople from '../floorRoomSign/addPeople';
  import moment from 'moment';
  import {printExcel} from "@/utils/printExcel";
  export default {
    data() {
      return {
        isShowColumn: false,
        // 列的配置化对象，存储配置信息
        checkList: {},
        showColumn: {
          roomSignNum: true,
          name: true,
          state: true,
          sourceType: true,
          sourceAgreenid: true,
          checkinType: true,
          days: true,
          arrivalsTime: true,
          predissociationTime: true,
          roomPrice: true,
          payPrice: true,
          collectPrice: true,
          roomName: true,
        },
        time: '',
        isDebtOrder: false,
        pickerOptions: {

        },
        table: {
          type: 3
        },
        loading: false,
        shaixuan: false,
        guestListLoading: false,
        cancelReserveVisible: false,
        addPeopleVisible: false,
        ruzhangVisible: false,
        closingRoomVisible: false,
        reservePaiFangListVisible: false,
        changeRoomVisible: false,
        joinRoomVisible: false,
        xuzhuTiqianVisible: false,
        guestlistLoadVisible: false,
        currDate: moment().format('YYYY-MM-DD'),
        unitedHouseList: [],
        platformSeller: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        sj: {
          one: 0,
          two: 0,
          three: 0,
          four: 0,
          five: 0,
          ones: 0,
          twos: 0,
          threes: 0,
          fours: 0,
          fives: 0,
        },
        dataForm: {
          state: '1',
          externalNo: '',
          type: 1,
          lx: '1',
          reserveState: '1',
          sysNo: '',
          checkinType: '',
          sourceType: '',
          ruzhu1: '',
          ruzhu2: '',
          lidian1: '',
          lidian2: '',
          creat1: '',
          creat2: '',
          predissociationTime: '',
        },
        sellerIds: [],
      };
    },
    components: {
      changeRoom,
      joinRoom,
      closingRoom,
      cancelReserve,
      xuzhuTiqian,
      guestlistLoad,
      ruzhang,
      reservePaiFangList,
      addPeople
    },
    activated() {
      this.getDataList();
      this.remoteMethod();
    },
    watch: {
      // 监听复选框配置列所有的变化
      checkList: {
        handler: function (newnew, oldold) {
          this.showColumn = newnew;
          // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况  这一步至关重要
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
        },
        deep: true,
        immediate: true,
      },
    },
    mounted() {
      // 发请求得到checkListInitData的列的名字
        this.checkList = {
          roomSignNum: true,
          name: true,
          state: true,
          sourceType: true,
          sourceAgreenid: true,
          checkinType: true,
          days: true,
          arrivalsTime: true,
          predissociationTime: true,
          roomPrice: true,
          payPrice: true,
          collectPrice: true,
          roomName: true
        };
    },
    methods: {
      isCertain(){
        this.isShowColumn = false;
      },
      handleChange(val) {
        console.log('选择了日期', val);
        const time = val[0];
        console.log("ooo"+this.formatDate(val[0]));
        // console.log("unitedHouseList"+this.unitedHouseList)
        // // 在这里执行你的操作
      this.dataForm.ruzhu2= this.formatDate(val[0])
        this.dataForm.predissociationTime= this.formatDate(val[1])
        this.getDataList(this.dataForm)
      },
      //格式化时间
      formatDate(timeStr) {
    var date = new Date(timeStr);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    var d = date.getDate();
    d = d < 10 ? '0' + d : d;
    var h = date.getHours();
    h = h < 10 ? '0' + h : h;
    var minute = date.getMinutes();
    minute = minute < 10 ? '0' + minute : minute;
    var s = date.getSeconds();
    s = s < 10 ? '0' + s : s;
    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s;
  },
      //结账
      checkout(item){
        this.closingRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.closingRoom.init({
            singleId: item.singleId,
            floorRoomId: item.floorRoomId
          });
        });
      },
      //打印
      print(id){
        window.print();
        // printExcel(id)
      },
      showColumnOption() {
        this.isShowColumn = true;
      },
      saveColumn() {
        // localStorage.setItem("columnSet", JSON.stringify(this.checkList));
        this.isShowColumn = false;
      },
      deleteReserveOrder(row) {
        this.$confirm('此操作将删除该预定单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$http({
            url: this.$http.adornUrl(
              `/hotel/thotelfloorroomcheckinsingle/deleteReserve`
            ),
            method: "get",
            params: this.$http.adornParams({
              peopleId: row.id
            }),
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.getDataList()
              this.$message({
                message: this.$t("Common.OperationSuccessful"),
                type: "success",
                duration: 1500,
                onClose: () => {

                },
              });
            } else {
              this.$message.error(data.msg);
            }

          });

        }).catch(() => {

        });
      },
      //查询全部
      allList(){
        this.getDataList()
      },
      state(value){
        this.dataForm.state= value
        this.getDataList(this.dataForm)
      },
      isDebt(){
        if(this.isDebtOrder){
          this.unitedHouseList = this.unitedHouseList.filter(item => {
            (item.payment +item.deposit - item.consumption).toFixed(2) < 0
          })
        }else {
          this.getDataList()
        }
      },
      //清空筛选
      clearShaiXuan() {
        Object.assign(this.dataForm, this.$options.data().dataForm)
        this.getDataList();
      },
      //取消订单
      cancelReserveOrder(row) {
        this.cancelReserveVisible = true;
        this.$nextTick(() => {
          this.$refs.cancelReserve.init(row.id, row.singleId);
        })
      },
      loadMoreBtn(row) {
        this.guestlistLoadVisible = true;
        this.$nextTick(() => {
          console.log("row", row)
          this.$refs.guestlistLoad.init(row.singleId);
        })
      },
      manualRoomBtn(row) {
        this.reservePaiFangListVisible = true;
        this.$nextTick(() => {
          this.$refs.reservePaiFangList.init(row.id);
        })
      },
      addPeopleBtn(item) {
        this.addPeopleVisible = true;
        this.$nextTick(() => {
          this.$refs.addPeople.init({
            sellerId: item.sellerId,
            floorRoomId: item.floorRoomId,
            arrivalsTime: item.arrivalsTime,
            predissociationTime: item.predissociationTime,
            roomPrice: item.roomPrice,
            singleId: item.singleId,
            sign: item.sign
          });
        });
      },
      // 入账
      ruzhangHandle(item) {
        this.ruzhangVisible = true;
        this.$nextTick(() => {
          this.$refs.ruzhang.init({
            id: item.id,
            singleId: item.singleId
          });
        });
      },
      xuzhuTiqian(item) {
        console.log(item);
        this.xuzhuTiqianVisible = true;
        this.$nextTick(() => {
          this.$refs.xuzhuTiqian.init({
            id: item.id,
            predissociationTime: item.predissociationTime,
            arrivalsTime: item.arrivalsTime,
            singleId: item.singleId,
            floorRoomId: item.floorRoomId,
            roomId: item.hotelFloorRoomEntity.roomId
          });
        });
      },
      jieZhangTuiFang(item) {
        this.closingRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.closingRoom.init({
            singleId: item.singleId,
            floorRoomId: item.floorRoomId
          });
        });
      },
      etixRoom(floorRoomId) {
        this.$confirm('您确认要退出联房吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/exit_single/${floorRoomId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        });
      },
      //换房
      changeRoom(item) {
        this.changeRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.changeRoom.init(item);
        });
      },

      selectSeller(id, value) {
        this.getDataList()
      },
      //加载平台商家数据
      remoteMethod(query) {
        if (this.isAuth('hotel:hotelseller:list')) {
          this.loading = true;
          this.$http({
            url: this.$http.adornUrl("/hotel/hotelseller/platformSeller"),
            method: "get",
            params: this.$http.adornParams({
              sellerName: query
            })
          }).then(({
            data
          }) => {
            this.loading = false;
            if (data && data.code === 0) {
              this.platformSeller = data.page.list;
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      },
      // 加入联房
      joinRoomBtn(singleId) {
        this.joinRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.joinRoom.init(singleId);
        });
      },
      init() {},
      toAccounting(item, type) {
        //将数据存储到本地
        var p = {
          singleId: item.singleId,
          type: type
        };
        this.$cookie.set('accounting', JSON.stringify(p));
        this.$router.push({
          name: 'accounting'
        });
      },
      handleClick(tab, event) {
        console.log(tab, event);
        this.pageIndex = 1
        this.getDataList();
      },
      getDataList(dataForm) {
        this.unitedHouseList = []

        this.getDataList2();
        var ids = ""
        if (this.sellerIds) {
          this.sellerIds.forEach((item, index) => {
            ids += item + ","
          })
          ids = ids.substring(0, ids.length - 1)
        }
        var params = {
          page: this.pageIndex,
          limit: this.pageSize,
          ids: ids,
          ...this.dataForm,
        }
        this.guestListLoading = true;
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/guest_list`),
          method: 'get',
          params: this.$http.adornParams(params)
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {

            console.log(data);
            this.unitedHouseList = data.data.page.list;
            console.log("this.unitedHouseList", this.unitedHouseList)
            this.unitedHouseList.forEach(item => {
              if (item.arrivalsTime) {
                item.arrivalsTime = moment(item.arrivalsTime).format('YYYY-MM-DD HH:mm')
              }
              if (item.predissociationTime) {
                item.predissociationTime = moment(item.predissociationTime).format('YYYY-MM-DD HH:mm')
              }
            })
            if (this.pageIndex == 1) {
              this.totalPage = data.data.page.totalCount;
            }
          } else {
            this.$message.error(data.msg);
          }
          this.guestListLoading = false;
        });

      },
      getDataList2() {
        var ids = ""
        if (this.sellerIds) {
          this.sellerIds.forEach((item, index) => {
            ids += item + ","
          })
          ids = ids.substring(0, ids.length - 1)
        }
        var params = {
          page: this.pageIndex,
          limit: this.pageSize,
          ids: ids,
          ...this.dataForm,
        }
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/guest_list_data`),
          method: 'get',
          params: this.$http.adornParams(params)
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            //数据统计
            this.sj.one = data.data.name_1
            this.sj.two = data.data.name_2
            this.sj.three = data.data.name_0
            this.sj.four = data.data.name_5
            this.sj.five = data.data.name_6
            if (this.dataForm.type == 0) {
              //数据统计
              this.sj.ones = data.data.name_7
              this.sj.twos = data.data.name_8
              this.sj.threes = data.data.name_9
              this.sj.fours = data.data.name_10
              this.sj.fives = data.data.name_11
            }
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .orange_circle_span {
    display: inline-block;
    vertical-align: middle;
  }

  .booking_circle_span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #f24e4c;
    border: 1px solid #f24e4c;
    font-size: 12px;
    text-align: center;
    line-height: 16px;
  }

  .el-input__suffix {
    right: 10px;
    top: -1px;
  }

  .dl_drop {
    color: rgba(0, 0, 0, 0.65);
    z-index: 999;
    border-radius: 4px;
    overflow: hidden;
  }

  .dl_drop dd {
    padding: 0 15px;
    font-size: 13px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0px;
  }

  .el-form {
    /deep/ .el-radio+.el-radio {
      margin-left: 0;
      margin-bottom: 5px;
    }
  }

  .ant-popover-inner-content {
    padding: 12px 16px;
    color: #002140;

    .table_recent_price_ul {
      max-width: 900px;

      table {
        border-collapse: collapse;
        width: 100%;

        thead, th, tr, tt, u, ul {
          font: inherit;
          font-size: 100%;
          margin: 0;
          padding: 0;
          vertical-align: initial;
          border: 0;
        }


      }

    }

  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
  .columnOption {
    position: fixed;
    top: 80px; /* 或者其他适合的值 */
    right: 80px; /* 或者其他适合的值 */
    width: 300px; /* 或者其他适合的值 */
    /* 其他样式，如背景色、边框、阴影等 */
    z-index: 999; /* 确保它在其他内容之上 */
    transition: all 0.3s ease; /* 与 <transition> 组件的 name="fade" 相对应 */
    /* fade 过渡效果 */
    &.fade-enter-active, &.fade-leave-active {
      transition: opacity 0.5s;
    }
    &.fade-enter, &.fade-leave-to {
      opacity: 0;
    }
  }
  .recent_price_ul table th>.list_box>span {
    line-height: 36px;
    background: #f0f0f0;
    height: 36px;
  }

  .table_recent_price_ul.table_recent_price_ul table tbody tr td:first-of-type .list_box span {
    height: calc(100% + 1px);
  }

  .recent_price_ul table td>.list_box>span {
    height: 95px;
  }

  .recent_price_ul table td>.list_box>span,
  .recent_price_ul table th>.list_box>span {
    float: left;
    width: 150px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .25);
    margin-left: -1px;
    margin-top: -1px;
  }

  .recent_price_ul table td:first-of-type>.list_box span>div:first-of-type,
  .recent_price_ul table td>.list_box>span>div:first-of-type {
    margin-top: 8px;
    margin-bottom: 6px;
  }

  .table_recent_price_ul.table_recent_price_ul td:nth-of-type(2) .list_box {
    max-height: 340px;
    overflow: auto;
  }

  /* @media print 规则来仅打印.print-only div */
  @media print {
    /* 隐藏所有其他元素 */
    body * {
      visibility: hidden;
    }

    /* 显示.print-only div及其子元素 */
    .print-only, .print-only * {
      visibility: visible;
    }

    .chapter-break {
      page-break-before: always;
    }
    /* 如果需要，可以进一步调整.print-only div的样式 */
    .print-only {
      position: absolute; /* 根据需要设置 */
      left: 0;
      top: 0;
      /* 其他打印样式 */
    }
  }
</style>
